<template>
  
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age}}</h2>
    <button @click="showSex">查看性别</button>
    <button @click="changeName()">修改名字</button>
    <button @click="changeAge()">修改年龄</button>
  </div>
</template>

<script lang="ts">

  export default {
      name: 'myPerson',
      // 选项式api写法
      // data() {
      //   return {
      //     name: 'FindYou',
      //     age: 21,
      //     sex: '男'
      //   }
      // },
      // methods: {
      //   showSex() {
      //     alert(this.sex)
      //   },
      //   changeName() {
      //     this.name = 'findYou'
      //   },
      //   changeAge() {
      //     this.age += 1
      //   }
      // }, 
      setup() { // 一函数 setup里面的this是undefined
        //数据
        let name = 'FindYou' // 不是响应式的 
        let age = 18 // 不是响应式的
        let sex = '男' // 不是响应式的
        // return {a: name, b: age}
        //写方法
        function changeName() {
          name = '看看你的'
        }
        function changeAge() {
          age += 1
        }
        function showSex() {
          alert('性别: ' + sex)
        }

        return {name: name, age: age, changeName, changeAge, showSex} // 简写为 return {name, age}
      }
  }

</script>

<style scoped>

.person {
  background-color: pink;
}
button {
  margin: 0 5px;
}
</style>